<template>
  <div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50">
    <!-- 顶部导航栏 -->
    <nav class="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0 z-40">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <h1 class="text-xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
                博沃智慧AI
              </h1>
            </div>
            <div class="hidden md:block ml-10">
              <div class="flex items-baseline space-x-4">
                <a href="#" class="text-gray-900 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">
                  对话
                </a>
                <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">
                  知识库
                </a>
                <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">
                  设置
                </a>
              </div>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <button class="text-gray-500 hover:text-gray-700">
              <i class="fas fa-bell"></i>
            </button>
            <div class="relative">
              <button class="flex items-center space-x-2 text-gray-700 hover:text-gray-900">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/user/32/32.jpg" alt="用户头像">
                <span class="hidden md:block text-sm font-medium">管理员</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <div class="flex h-screen pt-16">
      <!-- 侧边栏 -->
      <Sidebar 
        :conversations="conversations"
        :current-conversation-type="currentConversationType"
        :conversation-stats="conversationStats"
        @select-conversation="loadConversation"
        @new-conversation="createNewConversation"
      />

      <!-- 主内容区域 -->
      <div class="flex-1 flex flex-col">
        <!-- 对话区域 -->
        <div class="flex-1 overflow-y-auto p-6" ref="chatContainer">
          <div class="max-w-4xl mx-auto">
            <!-- 欢迎界面 -->
            <div v-if="messages.length === 0" class="text-center py-12">
              <div class="mb-8">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">欢迎使用博沃智慧AI</h2>
                <p class="text-lg text-gray-600">选择一个对话类型开始体验</p>
              </div>
              
              <!-- 对话类型选择 -->
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                <div 
                  v-for="type in conversationTypes" 
                  :key="type.id"
                  @click="loadConversation(type.id)"
                  class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 cursor-pointer hover:shadow-md transition-shadow"
                >
                  <div :class="type.iconBg" class="w-12 h-12 rounded-lg flex items-center justify-center mb-4 mx-auto">
                    <i :class="type.icon" class="text-white text-xl"></i>
                  </div>
                  <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ type.title }}</h3>
                  <p class="text-sm text-gray-600">{{ type.description }}</p>
                </div>
              </div>
            </div>

            <!-- 对话消息 -->
            <div v-else class="space-y-6">
              <div 
                v-for="message in messages" 
                :key="message.id"
                :class="['flex', message.sender === 'user' ? 'justify-end' : 'justify-start']"
              >
                <div 
                  :class="[
                    'max-w-3xl',
                    message.sender === 'user' 
                      ? 'bg-indigo-600 text-white' 
                      : 'bg-white text-gray-900 shadow-sm border border-gray-200'
                  ]"
                  class="px-4 py-3 rounded-lg"
                >
                  <p>{{ message.content }}</p>
                  <p 
                    :class="[
                      'text-xs mt-2',
                      message.sender === 'user' ? 'text-indigo-200' : 'text-gray-500'
                    ]"
                  >
                    {{ formatTime(message.timestamp) }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 处理进度区域 -->
        <div v-if="processingTasks.length > 0" class="border-t border-gray-200 bg-white">
          <div class="max-w-4xl mx-auto p-4">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900">处理进度</h3>
              <div class="flex items-center space-x-2">
                <div class="w-48 bg-gray-200 rounded-full h-2">
                  <div 
                    class="bg-indigo-600 h-2 rounded-full transition-all duration-300"
                    :style="{ width: progress + '%' }"
                  ></div>
                </div>
                <span class="text-sm text-gray-600">{{ progress }}%</span>
              </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div 
                v-for="task in processingTasks" 
                :key="task.id"
                :class="getTaskClasses(task)"
                class="p-3 rounded-lg"
              >
                <div class="flex items-center justify-between mb-2">
                  <div class="flex items-center space-x-2">
                    <div :class="getTaskIconClasses(task)" class="w-6 h-6 rounded-full flex items-center justify-center">
                      <i :class="getTaskIcon(task)" class="text-white text-xs"></i>
                    </div>
                    <span class="font-medium text-gray-900">{{ task.title }}</span>
                  </div>
                  <span :class="getTaskStatusClasses(task)" class="text-xs">
                    {{ getTaskStatus(task) }}
                  </span>
                </div>
                <p class="text-xs text-gray-600">{{ task.description }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 结果面板区域 -->
        <div v-if="resultPanels.length > 0" class="border-t border-gray-200 bg-gray-50">
          <div class="max-w-4xl mx-auto p-4">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">分析结果</h3>
            <DynamicPanels 
              :panels="resultPanels"
              :conversation-type="currentConversationType"
              @panel-click="handlePanelClick"
            />
          </div>
        </div>

        <!-- 输入区域 -->
        <div class="border-t border-gray-200 bg-white">
          <div class="max-w-4xl mx-auto p-4">
            <div class="flex space-x-4">
              <div class="flex-1">
                <div class="relative">
                  <input 
                    v-model="inputMessage"
                    type="text" 
                    placeholder="输入您的问题..."
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                    @keyup.enter="sendMessage"
                  >
                  <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                    <i class="fas fa-paperclip"></i>
                  </button>
                </div>
              </div>
              <button 
                @click="sendMessage"
                :disabled="!inputMessage.trim()"
                class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                发送
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useHomeState } from '../composables/home/useHomeState'
import Sidebar from '../components/home/Sidebar.vue'
import DynamicPanels from '../components/home/DynamicPanels.vue'
import type { ResultPanel } from '../types/home'
import { formatTime, getTaskIcon, getTaskIconClasses, getTaskStatus, getTaskStatusClasses, getTaskClasses } from '../utils/home'

// 状态管理
const {
  conversations,
  currentConversationType,
  messages,
  processingTasks,
  resultPanels,
  progress,
  conversationStats,
  loadConversation,
  createNewConversation,
  sendMessage,
  handlePanelClick
} = useHomeState()

// 本地状态
const inputMessage = ref('')
const chatContainer = ref<HTMLElement>()

// 对话类型配置
const conversationTypes = [
  {
    id: 'knowledge',
    title: '知识问答',
    description: '专业知识查询与解答',
    icon: 'fas fa-book-open',
    iconBg: 'bg-blue-500'
  },
  {
    id: 'data',
    title: '数据分析',
    description: '数据查询与趋势分析',
    icon: 'fas fa-chart-line',
    iconBg: 'bg-indigo-500'
  },
  {
    id: 'image',
    title: '图像识别',
    description: '图像处理与特征提取',
    icon: 'fas fa-image',
    iconBg: 'bg-green-500'
  },
  {
    id: 'code',
    title: '代码分析',
    description: '代码质量与性能优化',
    icon: 'fas fa-code',
    iconBg: 'bg-purple-500'
  }
]

// 发送消息
const handleSendMessage = async () => {
  if (!inputMessage.value.trim()) return
  
  await sendMessage(inputMessage.value)
  inputMessage.value = ''
}

// 滚动到底部
const scrollToBottom = async () => {
  await nextTick()
  if (chatContainer.value) {
    chatContainer.value.scrollTop = chatContainer.value.scrollHeight
  }
}

// 监听消息变化
const watchMessages = () => {
  scrollToBottom()
}

onMounted(() => {
  // 初始化
})
</script>